<template>
  <van-overlay
    :show="props.visible"
    @click="close"
    z-index="999"
  >
    <div
      class="wrapper"
      @click="close"
      v-if="props.shareImg == ''"
    >
      <van-loading
        type="spinner"
        color="#fff"
        size="24px"
        vertical
      >
        加载中...
      </van-loading>
    </div>
    <div
      v-else
      class="shareImgs"
    >
      <img :src="props.shareImg">
    </div>
  </van-overlay>
</template>

<script setup lang="ts">
const emit = defineEmits(['closeLoading'])
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: true
  },
  shareImg: {
    type: String,
    required: true
  }
})

const close = async () => {
  emit('closeLoading')
}
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.shareImgs {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  img {
    width: 90%;
    // height:450px;
  }
}
@media (min-width: 750px) {
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .shareImgs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 100%;
    margin:0 auto;
    img {
      width: 90%;
      // height:450px;
    }
  }
}
</style>
